<template>
    <div class="reset_pwd_form_container">
        <el-form ref="resetPwdForm" :rules="rules" :model="formData" label-width="100px">
            <el-form-item label="账户名" prop="login_id">
                <el-input v-model="formData.login_id" disabled/>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input type="password" v-model="formData.password"
                          autocomplete="new-password" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="确认新密码" prop="repassword">
                <el-input type="password" v-model="formData.repassword"
                          autocomplete="new-password" placeholder="请输入"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import md5 from 'js-md5';
import { mapState } from "vuex";

export default {
    name: "ResetPwdForm",
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data () {
        const _this = this;
        let valiPasswork = (rule, value, callback) => {
            let pattern = /^[A-Za-z0-9+-_.]{1,32}$/;
            if (_this.isEdit) {
                callback();
                return;
            }
            if (_this.$utils.isNotEmpty(value)) {
                if (pattern.test(value)) {
                    if (_this.$utils.isNotEmpty(_this.formData.repassword)) {
                        _this.$refs.resetPwdForm.validateField("repassword");
                    }
                    callback();
                } else {
                    callback("最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符");
                }
            } else {
                callback("请输入密码！");
            }
        };
        let valiConFirmPasswork = (rule, value, callback) => {
            if (_this.isEdit) {
                callback();
                return;
            }
            if (_this.$utils.isNotEmpty(value)) {
                if (_this.formData.password === value) {
                    callback();
                } else {
                    callback("两次录入密码不一致！");
                }
            } else {
                callback("请输入确认密码！");
            }
        };
        return {
            rules: {
                password: [
                    {required: true, validator: valiPasswork, trigger: "blur"},
                ],
                repassword: [
                    {required: true, validator: valiConFirmPasswork, trigger: "blur"},
                ],
            },
            formData: {},
        };
    },
    computed: {
        ...mapState([ 'userInfo' ]),
        isEdit () {
            return this.$utils.isNotEmpty(this.formData.sid);
        },
    },
    watch: {
        row: {
            handler () {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init () {
            const _this = this;
            if (!_this.row) {
                return;
            }
            if (_this.$refs.resetPwdForm) {
                _this.$refs.resetPwdForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.row);
        },
        async confirm () {
            const _this = this;
            let valid = await _this.validateForm('resetPwdForm');
            if (valid) {
                if (_this.formData.password !== _this.formData.repassword) {
                    _this.$message.error("两次输入密码不一致！");
                    return;
                }
                return _this.fetchData(_this.$api.API_ResetPwd, {
                    sid: _this.formData.sid,
                    password: md5(_this.formData.password),
                }).then(() => {
                    _this.$message.success('密码重置成功！');
                    if (_this.formData.sid === _this.userInfo.sid) {
                        _this.$utils.logout();
                        _this.$router.push('/login');
                    }
                    return true;
                }).catch(() => {
                    return false;
                });
            }
            return valid;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.reset_pwd_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
